<template>
	<div>
		<div class="mineNav">
			<MineNav :navTitle="navTitle" />
		</div>
		<router-link :to="{name:'mineReset'}">
			<img class="leftArrow" src="../../../../assets/images/dynamicState/37/f-1.png" alt="" />
		</router-link>
		<p class="submitPass" @click.stop="submit">保存</p>
		<div class="recomposePass">
			<div>
				<input type="password" placeholder="请输入原密码" v-model="oldPass"/>
			</div>
			<div>
				<input type="password" placeholder="请设置新密码" v-model="resetPass"/>
				
			</div>
			<div>
				<input type="password" placeholder="请再次确认新密码" v-model="checkPass"/>
			</div>
			
		</div>
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="30%"
		 >
		  <span>{{content}}</span>
		</el-dialog>
	</div>
</template>

<script>
	import MineNav from "../../public/mineNav"
	export default {
		components:{
			MineNav
		},
		data(){
			return{
				navTitle:"修改密码",
				oldPass:'',
				resetPass:'',
				checkPass:'',
				dialogVisible:false,
				content:""
			}
		},
		methods:{
			submit(){
				this.dialogVisible = true;
				var password = localStorage.getItem("password")
				var username = localStorage.getItem("username")
				console.log(password)
				if(!password){
					this.content = "用户还没有登录"
				}else{
					if(this.oldPass == ''){
						this.content = "用户密码不能为空"
					}else{
						if(password == this.oldPass ){
							if(this.resetPass == this.checkPass){
								this.$axios.post("http://localhost:3000/resetpassword",{
									username:username,
									password:this.resetPass
								})
								.then(res => {
									this.content = "修改成功"
									localStorage.setItem("password",this.resetPass)
								})
								.catch(error => {
									console.log(error)
								})
							}else{
								this.content = "确认密码失败"
							}
						}else{
							this.content = "用户密码不正确"
						}
					}
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@current: 100rem;
	.mineNav {
		height: 88/@current;
	}
	.leftArrow {
		position: fixed;
		top: 26/@current;
		left: 40/@current;
		z-index: 333;
		width: 22/@current;
	}
	.submitPass{
		position: fixed;
		top: 23/@current;
		right: 40/@current;
		z-index: 333;
		font-size:32/@current;
		color:white;
	}
	.recomposePass{
		width:600/@current;
		margin-left:20/@current;
		div{
			width:100%;
			height:77/@current;
			margin-top:20/@current;
			input{
			   width:583/@current;
			   height:75/@current;	
			   border:1/@current solid #d1cbdc;
			   border-radius: 10/@current;
			   transform: translateY(-52/@current);
			   font-size:32/@current;
			   color:#b0a9ba;
			   padding-left:15/@current;
			}
		}
		
		
	}
</style>